<template>
    <view class="job-li nova-row-center" @click="onItemClick(item)">
        <image class="icon" :src="detail.photo"></image>
        <view class="nova-column" style="flex: 1;">
            <view class="nova-row-center">
                <text class="title">{{ detail.name }}</text>
                <text class="up-tag" v-if="showUpTag()">{{ getUpTag() }}</text>
                <text class="up-tag" v-if="showUpTag() && detail.aunt_process == 1">已预约</text>
                <text class="up-tag" v-if="getWorkStatus()">{{getWorkStatus()}}</text>
                <view class="" style="flex: 1;"></view>
                <block v-if="role == 3">
                    <text class="price">{{ item.price || '' }}</text>
                    <text class="unit">元/月</text>
                </block>
                <block v-if="role == 2">
                    <text class="price" v-if="pageYZShare">{{ item.price || '' }}元/月</text>

                    <view class="btn focus" v-if="page == 'yz-focus' || page == 'yz-home'" @click.stop="goFocus">{{ detail.status == 1 ? '关注' : '取消关注' }}</view>
                    <view class="btn focus" v-if="page == 'yz-employ'">{{ getStatus4YZ(detail) }}</view>
                </block>
            </view>

            <text class="line1">{{ getLine1() }}</text>

            <view class="nova-row-center" style="align-items: flex-end;">
                <view class="nova-row-center" style="flex-wrap: wrap; flex: 1;">
                    <block v-if="item.tip && item.tip.length > 0">
                        <image v-for="v in item.tip" :key="v" class="tag" v-if="v" mode="widthFix" :src="getSkillTag(v)" @error="yztagerror"></image>
                        <block></block>
                    </block>
                </view>

                <block v-if="role == 2">
                    <view v-if="pageYZShare" class="btn share" style="margin-left: 40rpx;" @click.stop="goCall">拨打</view>
                    <text class="price" style="text-align: right; white-space: nowrap;" v-else>{{ item.price || '' }}元/月</text>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
import conf from '../../common/conf.js';
export default {
    name: 'li-aunty',
    props: {
        page: {
            // 哪个页面，
            // 业主入口：yz-focus, yz-employ, yz-share, yz-home
            // 公司入口：gs-home, gs-employ, gs-recommend
            type: String,
            default: '' //
        },
        publish_id: {
            type: String,
            default: ''
        },
        item: {
            type: Object,
            default: () => {}
        },
        itemIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            detail: undefined,
            role: this.$global.role ? parseInt(this.$global.role) : 0,
            pageYZShare: this.page === 'yz-share'
        };
    },
    created() {
        //console.log('from page ' + this.page + ', item ', this.item);
        this.detail = this.item ? this.item.job : {};
        if (this.item.tip && this.item.tip.length > 2) {
            this.item.tip = this.item.tip.splice(0, 2);
        }
    },
    watch: {
        item(newVal, oldVal) {
            this.detail = this.item ? this.item.job : {};
        }
    },
    methods: {
        showUpTag() {
            // 是否显示名字后面的上标标签
            let show = this.role == 3 && this.page == 'gs-employ';
            return show;
        },
        getUpTag() {
            // 阿姨状态
            return this.$getAuntyStatus(this.detail.aunt_status);
        },
        getWorkStatus() {
            if (this.page === 'yz-home') {
                return this.detail.work_status;
            } else {
                return ''
            }
        },
        getStatus4YZ(detail) {
            // 阿姨状态
            let st = detail.aunt_status ? parseInt(detail.aunt_status) : 0;
            if (st > 1) {
                let auntyState1 = ['已发布', '已收录', '已推荐', '试用中', '去评价', '添加追评', '已追评']; //阿姨的主线状态
                return auntyState1[st];
            }
            if (detail.aunt_process == 0) {
                return '去预约';
            }
            return this.$getAuntyStatus2(detail.aunt_process);
        },
        getLine1() {
            let arr = [];
            let detail = this.detail;
            if (detail.sex) {
                arr.push(detail.sex);
            }
            if (this.item.birthday) {
                arr.push(this.item.birthday);
            } else if (detail.birthday) {
                arr.push(detail.birthday);
            }
            if (detail.zodiac) {
                arr.push(detail.zodiac);
            }
            if (detail.constellation) {
                arr.push(detail.constellation)
            }
            if (detail.area) {
                arr.push(detail.area);
            }
            if (detail.workYear) {
                arr.push(detail.workYear + '年工作经验');
            }
            return arr.join(' | ');
        },
        getSkillTag(tag) {
            let v = '';
            let i = conf.ayTypes.indexOf(tag);
            if (i >= 0) {
                v = conf.ayTypesImg[i]
            }
            return '../../static/jn/' + v + '.png'
        },
        onItemClick(item) {
            // 只有可能是role 3 或role 2
            let url = '';
            
            let publish_id = this.publish_id
            if (this.role == 2) {
                // yz
                if (this.page == 'yz-share') {
                    // 页面为公司给业主推荐的阿姨列表
                    console.log('分享详情', this.detail);
                    uni.navigateTo({
                        url: '../yz/yz-share-detail?id=' + this.detail.publish_share_id
                    });
                    return;
                }
                else if (this.page == 'yz-employ') {
                    publish_id = this.detail.publish_id;
                }
            }
            let resume_id = this.detail.resume_id;
            let company_id = this.detail.company_id || this.detail.companyId;
            if (this.$checkIdentification()) {
                uni.navigateTo({
                    url: `../c/p-aunty-detail?resume_id=${resume_id}&company_id=${company_id}&page=${this.page}&publish_id=${publish_id}&aunt_status=${
                        this.detail.aunt_status
                    }`
                });
            }
        },
        async goFocus() {
            // yz
            if (!this.$checkIdentification()) {
                return;
            }
            console.log('操作前 status=' + this.detail.status);
            let ret = await this.$request.post({
                url: '/owner/follow',
                data: {
                    company_id: this.detail.company_id || this.detail.companyId,
                    resume_id: this.detail.resume_id
                }
            });
            this.detail.status = ret.status;
            console.log('操作后 status=' + this.detail.status);
            let e = {
                item: this.item,
                itemIndex: this.itemIndex,
                resume_id: this.detail.resume_id
            };
            if (this.page === 'yz-focus') {
                //e.remove = true;
            }
            console.log('emit yzFocus', e);
            uni.$emit('auntyStatusChange', { ...e, refresh: true });
            uni.$emit('yzFocus', { ...e, remove: true });
        },
        goCall() {
            if (!this.$checkIdentification()) {
                return;
            }
            let tel = '';
            if (this.detail.telephone) {
                tel = this.detail.telephone;
            }
            if (tel) {
                wx.makePhoneCall({
                    phoneNumber: tel
                });
            }
        },
        yztagerror(e) {
            console.log(e);
        }
    }
};
</script>

<style lang="scss">
.nova-row-center {
    flex-wrap: wrap;
}
.job-li {
    position: relative;
    padding: 34rpx;
    &:after {
        @include divider(34rpx);
    }
    .icon {
        width: 160rpx;
        height: 160rpx;
        margin-right: 25rpx;
        border-radius: 10rpx;
        background-color: #f2f2f2;
    }
    .title {
        font-size: 32rpx;
        color: #333333;
    }

    .line1 {
        padding: 24rpx 0;
        color: #666;
        font-size: 24rpx;
    }

    .tag {
        width: 117rpx;
        height: 36rpx;
        margin-right: 10rpx;
        margin-top: 20rpx;
    }
    .price {
        font-size: 30rpx;
        color: $uni-color-primary;
    }
    .unit {
        font-size: 22rpx;
        color: $uni-color-primary;
    }
    .btn {
        width: 117rpx;
        height: 56rpx;
        color: $uni-color-primary;
        font-size: 28rpx;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &:after {
            @include border-1px($uni-color-primary, 6rpx);
            border-radius: 10rpx;
        }
    }
    .focus {
        height: 36rpx;
        min-width: 100rpx;
        padding: 0 0rpx;
    }
    .share {
        width: 100rpx;
    }
}
</style>
